<template>
  <div id="workplace">
    <div class="page-header">
      <page-header title="工作台">
        <a-row class="mt-10" type="flex" :gutter="[0, 24]">
          <a-col :xs="24" :sm="24" :md="12" class="flex">
            <div class="inline-block mr-10" v-if="winType !== 'xs'">
              <a-avatar :size="60" :src="avatarSrc" class="animate__animated animate__flipInX" />
            </div>
            <div class="inline-block">
              <p class="heading">晚安，User Admin，祝你开心每一天！</p>
              <p class="secondary">今日阴转小雨，22℃ - 32℃，出门记得带伞哦。</p>
            </div>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12">
            <div class="fr extra">
              <div class="inline-block item">
                <div>待办</div>
                <div class="heading">2/10</div>
              </div>
              <div class="inline-block item">
                <div>项目</div>
                <div class="heading">20</div>
              </div>
              <div class="inline-block item">
                <div>团队</div>
                <div class="heading">300</div>
              </div>
            </div>
          </a-col>
        </a-row>
      </page-header>
    </div>
    <a-row :gutter="[24, 24]">
      <a-col :span="24" :xl="16">
        <a-card title="我的项目" class="animate__animated animate__fadeInUp">
          <template #extra>
            <a href="#">全部项目</a>
          </template>
          <a-row>
            <a-col :xs="24" :sm="12" :lg="8" v-for="item in projectList">
              <a-card-grid style="width: 100%;">
                <span class="heading">
                  <component :is="item.iconCom" :style="{ color: item.iconColor }" />
                  &nbsp;&nbsp;{{ item.name }}
                </span>
                <p></p>
                <p>
                  <!-- ellipsis 设置tooltip:true后不bug不出现省略号 "ant-design-vue": "^2.2.1"  -->
                  <a-typography-paragraph :ellipsis="{ rows: 1 }" :content="item.phrase" />
                </p>
                <p class="secondary">
                  <span>{{ item.bottom[0] }}</span>
                  <span class="fr">{{ item.bottom[1] }}</span>
                </p>
              </a-card-grid>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="最新动态" class="mt-24 animate__animated animate__fadeInUp">
          <template #extra>
            <a href="#">全部</a>
          </template>
          <a-list item-layout="horizontal" :data-source="dynamicList">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta :description="item.time">
                  <template #title>
                    <a-typography-link href="#">{{ item.title[0] }}</a-typography-link>&nbsp;
                    <span>{{ item.title[1] }}</span>&nbsp;
                    <a-typography-link href="#">{{ item.title[2] }}</a-typography-link>
                  </template>
                  <template #avatar>
                    <a-avatar siez="60">
                      <template #icon>
                        <UserOutlined />
                      </template>
                    </a-avatar>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-col>
      <a-col :span="24" :xl="8">
        <a-card title="快捷导航" class="animate__animated animate__fadeInUp">
          <template #extra>
            <a href="#">
              <SettingOutlined />
            </a>
          </template>
          <a-card-grid class="text-center">导航1</a-card-grid>
          <a-card-grid class="text-center">导航2</a-card-grid>
          <a-card-grid class="text-center">导航3</a-card-grid>
          <a-card-grid class="text-center">导航4</a-card-grid>
          <a-card-grid class="text-center">导航5</a-card-grid>
        </a-card>
        <a-card title="待办事项" class="mt-24 animate__animated animate__fadeInUp">
          <template #extra>
            <a href="#">更多</a>
          </template>
          <a-table
            size="small"
            :rowSelection="{}"
            :pagination="false"
            :dataSource="toDoData"
            :columns="toDoColumns"
          />
        </a-card>
        <a-card title="小组成员" class="mt-24">
          <a-list item-layout="horizontal">
            <a-list-item>
              <a-list-item-meta description="前端工程师">
                <template #title>张三</template>
                <template #avatar>
                  <a-avatar>张三</a-avatar>
                </template>
              </a-list-item-meta>
              <div>
                <a-tag color="success">在线</a-tag>
              </div>
            </a-list-item>
            <a-list-item>
              <a-list-item-meta description="后端工程师">
                <template #title>李四</template>
                <template #avatar>
                  <a-avatar style="color: #f56a00">李四</a-avatar>
                </template>
              </a-list-item-meta>
              <div>
                <a-tag color="success">在线</a-tag>
              </div>
            </a-list-item>
            <a-list-item>
              <a-list-item-meta description="测试工程师">
                <template #title>王五</template>
                <template #avatar>
                  <a-avatar style="color: #3550e6">王五</a-avatar>
                </template>
              </a-list-item-meta>
              <div>
                <a-tag color="error">离线</a-tag>
              </div>
            </a-list-item>
            <a-list-item>
              <a-list-item-meta description="产品经理">
                <template #title>赵六</template>
                <template #avatar>
                  <a-avatar style="color: #f84538">赵六</a-avatar>
                </template>
              </a-list-item-meta>
              <div>
                <a-tag color="error">离线</a-tag>
              </div>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script lang='ts' >
export default { name: 'workplace' }
</script>
<script lang='ts' setup>
import avatarSrc from '@/assets/user/faces.jpg';
import { computed } from 'vue';
import { UserOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { GithubOutlined, Html5Outlined, GitlabOutlined, AlipayCircleOutlined, WechatOutlined, WeiboSquareOutlined } from '@ant-design/icons-vue';
import { useStore } from '@/store/store';
const store = useStore()
const winType = computed(() => store.state.app.winType)
// 项目list
const projectList: any = [
  {
    iconCom: GithubOutlined,
    iconColor: '',
    name: 'Github',
    phrase: '胸无大志，枉活一世。',
    bottom: ['攻城狮', '1分钟前']
  },
  {
    iconCom: Html5Outlined,
    iconColor: '#e18525',
    name: 'Html5',
    phrase: '即使爬到最高的山上，一次也只能脚踏实地地迈一步。',
    bottom: ['攻城狮', '1分钟前']
  },
  {
    iconCom: GitlabOutlined,
    iconColor: '#fd7e14',
    name: 'Gitlab',
    phrase: '有事者，事竟成；破釜沉舟，百二秦关终归楚；苦心人，天不负；卧薪尝胆，三千越甲可吞吴。',
    bottom: ['攻城狮', '1分钟前']
  },
  {
    iconCom: AlipayCircleOutlined,
    iconColor: '#1278fb',
    name: '支付宝',
    phrase: '忘掉失败，不过要牢记失败中的教训。',
    bottom: ['攻城狮', '1分钟前']
  },
  {
    iconCom: WechatOutlined,
    iconColor: '#3cae35',
    name: '微信',
    phrase: '不是境况造就人，而是人造就境况。',
    bottom: ['攻城狮', '1分钟前']
  },
  {
    iconCom: WeiboSquareOutlined,
    iconColor: '#fd0315',
    name: '微博',
    phrase: '靠山山会倒，靠水水会流，靠自己永远不倒。',
    bottom: ['攻城狮', '1分钟前']
  }
]
//动态list
const dynamicList: any = [
  {
    title: ['李铁柱', '修改了项目', 'Vue'],
    time: '刚刚',
  },
  {
    title: ['李铁柱', '创建了项目', 'Vue'],
    time: '刚刚',
  },
  {
    title: ['李铁柱', '创建了项目', 'React'],
    time: '3天前',

  },
  {
    title: ['李铁柱', '创建了项目', 'angular'],
    time: '3天前',
  },
  {
    title: ['李铁柱', '创建了项目', 'uni-app'],
    time: '2021-06-23'
  },
];
//待办事项
const toDoColumns: any = [
  {
    title: '事项',
    dataIndex: 'matter',
    key: 'matter',
    ellipsis: true,
  },
  {
    title: '处理人',
    dataIndex: 'person',
    key: 'person',
  },
]
const toDoData: any = [
  {
    key: 1,
    matter: '在线摸鱼',
    person: '张三'
  },
  {
    key: 2,
    matter: '在线摸鱼',
    person: '李四'
  },
  {
    key: 3,
    matter: '修改测试用例',
    person: '王五'
  },
  {
    key: 4,
    matter: '修改需求文档',
    person: '赵六'
  },
]
</script>
<style lang="less" scoped>
.page-header {
  .extra {
    text-align: right;
    .item {
      padding: 0 @padding-lg;
    }
  }
}
.secondary {
  color: @text-color-secondary;
}
.heading {
  font-size: @heading-4-size;
  color: @heading-color;
}
</style>
